<template>
  <view class="home_outer">
    <view class="home_title">
      <view class="home_title_top"><text>钻石价值</text></view>
      <view class="home_title_down">
        <view class="home_title_down_left">
          <text class="home_title_down_left_one">每K钻石价值：</text>
          <text class="home_title_down_left_two" v-if="newdiamondValue">{{ (homeAllData.diamondValue * 1000).toFixed(5)
          }}云豆</text>
          <image src="@/static/home/pricehign.png"></image>
        </view>
        <view class="home_title_down_right" @click="openSwitchoverDate"><text>周期切换</text></view>
      </view>
    </view>
    <view class="charts_title">
      <view class="charts_title_nowday">
        <text class="charts_title_nowday_top">今日涨幅</text>
        <text class="charts_title_nowday_down" v-if="homeAllData.diamondIncrease">{{
          homeAllData.diamondIncrease.toFixed(4) }}%</text>
      </view>
      <view class="charts_title_historyday">
        <text class="charts_title_historyday_top">历史总涨幅</text>
        <text class="charts_title_historyday_down" v-if="homeAllData.diamondHistoryIncrease">{{
          homeAllData.diamondHistoryIncrease.toFixed(4) }}%</text>
      </view>
    </view>
    <view class="charts_box">
      <qiunDataCharts type="area" :opts="opts" :chartData="chartData" tooltipFormat="pieDemo2"></qiunDataCharts>
    </view>
    <view class="exchange_box">
      <view class="exchange_box_title">
        <view class="exchange_box_title_top">
          <view class="exchange_box_title_top_left">
            <text>交换池</text>
          </view>
          <view class="exchange_box_title_top_right" @click="goRecordPage">
            <text>记录</text>
          </view>
        </view>
        <view class="exchange_box_title_down" v-if="homeAllData.cloudBean">
          <text>云豆总量：{{ (homeAllData.cloudBean).toFixed(5) }}</text>
          <text class="exchange_box_title_down_line">｜</text>
          <text>钻石总量：{{ (homeAllData.diamond / 1000).toFixed(3) }}k</text>
        </view>
      </view>
    </view>
    <view class="card_box">
      <view class="card_box_item" v-for="(cardItem, index) in cardBoxList" :key="cardItem.id">
        <view class="card_box_item_top">
          <text class="card_box_item_top_left" v-if="index == 0">消耗</text>
          <text class="card_box_item_top_left" v-if="index == 1">获得</text>
          <text class="card_box_item_top_right" v-if="index == 0">最大可用：{{ maxCanNum }}</text>
        </view>
        <view class="card_box_item_center">
          <view class="card_box_item_center_img">
            <image v-if="cardItem.id == 0" src="@/static/home/diamond.png"></image>
            <image v-if="cardItem.id == 1" src="@/static/home/bean.png"></image>
            <text class="card_box_item_center_text">{{
              cardItem.name
            }}</text>
          </view>
          <view class="card_box_item_center_ipt" v-if="index == 0">
            <u--input placeholder="1-999999" border="surround" placeholderStyle="font-size: 46rpx;" fontSize="46rpx"
              customStyle="width:440rpx" type="number" v-model="conversionNum"></u--input>
            <view v-if="cardItem.id == 0">K</view>
          </view>
          <view class="card_box_item_center_ipt" v-if="index == 1">
            <view class="card_box_item_center_ipt_text">
              <text v-if="!acquireNum" class="card_box_item_center_ipt_text_top">
                1-999999
              </text>
              <text v-else class="card_box_item_center_ipt_text_down">
                {{ acquireNum }}
              </text>
            </view>
            <text class="card_box_item_center_ipt_text_down_unit" v-if="cardItem.id == 0">K</text>

            <!-- <u--input
              placeholder="1-999999"
              border="surround"
              placeholderStyle="font-size: 46rpx;"
              fontSize="46rpx"
              customStyle="width:440rpx"
              :value="acquireNum"
              disabled
            ></u--input
          > -->
          </view>
        </view>
        <!-- <view class="card_box_item_down">
          <view
            class="card_box_item_down_text"
            v-if="index == 0"
            @click="maxSwapNumInfo"
            ><text>最大</text></view
          >
        </view> -->
      </view>
      <view class="card_box_swap" @click="swapDeal">
        <view class="card_box_swap_img">
          <image src="@/static/home/swap.png"></image>
        </view>
      </view>
    </view>
    <view class="exchange_rate">
      <text v-if="cardBoxList[0].id == 0 && homeAllData.diamondValue">1K钻石≈{{ (homeAllData.diamondValue * 1000).toFixed(5)
      }}云豆</text>
      <text v-if="cardBoxList[0].id == 1 && homeAllData.diamondValue">1云豆≈{{ (Math.floor(1 /
        this.homeAllData.diamondValue) / 1000).toFixed(3)
      }}K钻石</text>
    </view>
    <view class="exchange_rate_hign">
      <text>兑换收取10%手续费</text>
    </view>
    <view class="affirm_conversion">
      <view class="affirm_conversion_btn" @click="openTransaction"><text>确认兑换</text></view>
    </view>
    <u-popup :show="isShowSwitchoverDate" :round="10" mode="bottom" @close="isShowSwitchoverDate = false"
      bgColor="#FFFAEF" overlayStyle="background:#FF831E;opacity: 0.25;">
      <view class="switchoverDate_outer">
        <view class="switchoverDate_title">
          <text>周期切换</text>
        </view>
        <view class="switchoverDate_list">
          <view class="switchoverDate_item" v-for="(switchover, index) in switchoverDateList" :key="index"
            :class="selectSwitchoverDate == index ? 'active' : ''" @click="changeSelectSwitchoverDate(index)">
            <text>{{ switchover.name }}</text>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="isShowTransaction" :round="10" mode="bottom" @close="isShowTransaction = false" bgColor="#FFFAEF"
      overlayStyle="background:#FF831E;opacity: 0.25;" :closeOnClickOverlay="true">
      <view class="transaction_outer">
        <view class="transaction_title">
          <text>确认交换</text>
        </view>
        <view class="transaction_form">
          <u--form labelPosition="left" ref="uForm">
            <u-form-item ref="item1">
              <view class="transaction_form_pawsword">
                <view class="transaction_form_pawsword_img">
                  <image src="@/static/login/password.png"></image>
                </view>
                <u--input border="none" placeholder="请输入支付密码" v-model="payPassword"
                  :type="isShowPassword ? 'text' : 'password'">
                  <view slot="suffix" @click="isShowPassword = !isShowPassword" style="margin-right: 20rpx">
                    <u-icon name="eye-fill" v-if="isShowPassword"></u-icon>
                    <u-icon name="eye-off" v-else></u-icon>
                  </view>
                </u--input>
              </view>
            </u-form-item>
            <u-form-item ref="item4">
              <view class="transaction_form_pawsword_affirm">
                <view @click="getConversion">
                  <text>确定</text>
                </view>
              </view>
            </u-form-item>
          </u--form>
        </view>
      </view>
    </u-popup>
    <u-popup :show="isShowTransactionStatus" :round="10" mode="bottom" @close="isShowTransactionStatus = false"
      bgColor="#FFFAEF" overlayStyle="background:#FF831E;opacity: 0.25;" :closeOnClickOverlay="transactionStatusNum != 0">
      <view class="transactionStatus_outer">
        <view class="ransactionStatus_title">
          <text>{{ transactionStatusNum | showTransactionStatusText }}</text>
        </view>
        <view class="transaction_status_box">
          <view class="transaction_status1" v-if="transactionStatusNum == 0">
            <image class="transaction_status1_img1" src="@/static/home/statusLoding1.png"></image>
            <image class="transaction_status1_img2" src="@/static/home/statusLoding2.png"></image>
          </view>
          <view class="transaction_status2" v-if="transactionStatusNum == 1">
            <image class="transaction_status2_img" src="@/static/home/statusSuccess.png"></image>
          </view>
          <view class="transaction_status2" v-if="transactionStatusNum == 2">
            <image class="transaction_status2_img" src="@/static/home/statusFail.png"></image>
          </view>
        </view>
        <view class="ransactionStatus_obtained" v-if="transactionStatusNum == 1">
          <text v-if="this.cardBoxList[0].id == 0">交换成功数量：{{ obtainedNum }}云豆</text>
          <text v-if="this.cardBoxList[0].id == 1">交换成功数量：{{ (Math.floor(obtainedNum) / 1000).toFixed(3) }}K钻石</text>
        </view>
      </view>
    </u-popup>
    <u-modal :show="showPayPwdmodal" title="您还未设置支付密码，是否前去设置？" cancelText="再等等" confirmText="马上去" :showCancelButton="true"
      @cancel="showPayPwdmodal = false" @confirm="goSetPasswordPage"></u-modal>
  </view>
</template>

<script>
import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts.vue";
import { reqUserProperty } from "@/api/my.js";
import { mapMutations, mapState } from "vuex";
import {
  reqHomeData,
  reqConversion,
  reqConversionStatus,
  reqKlineCanvas,
  reqPeriodConfig,
} from "@/api/home.js";
export default {
  components: {
    qiunDataCharts,
  },
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        padding: [15, 15, 0, 15],
        enableScroll: false,
        dataLabel: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
          gridEval: 0.5,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber: 5,

          data: [
            {
              // min: 0,
              // max: 0.01,
              axisLine: false,
              format: "pieDemo3",
              fontSize: 10,
            },
          ],
        },
        extra: {
          area: {
            type: "straight",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: false,
            activeType: "hollow",
          },
        },
        update: true,
        duration: 0,
        animation: false
      },
      cardBoxList: [
        {
          id: 0,
          name: "钻石",
        },
        {
          id: 1,
          name: "云豆",
        },
      ],
      // 是否弹出周期切换
      isShowSwitchoverDate: false,
      // 周期切换列表
      switchoverDateList: [
        // "5分",
        // "15分",
        // "30分",
        // "1小时",
        // "6小时",
        // "12小时",
        // "1日",
        // "一周",
        // "1月",
        // "1年",
      ],
      // 选择的周期
      selectSwitchoverDate: 4,
      // 是否弹出确认交易框
      isShowTransaction: false,
      // 交易状态弹框
      isShowTransactionStatus: false,
      // 交易状态
      transactionStatusNum: 0,
      // 首页数据
      homeAllData: {},
      // 兑换数量
      conversionNum: null,
      // 获得数量
      acquireNum: null,
      // 支付密码
      payPassword: "",
      // 支付状态定时器
      payStatusTimer: null,
      // K线图定时器
      KlineTimer: null,
      userProperty: {},
      isShowPassword: false,
      obtainedNum: "",
      newdiamondValue: '',
      seriesDataArr: [],
      seriesDataArrIndex: 100,
      newKlineTimer: null,
      categoriesArr: [],
      showPayPwdmodal: false
    };
  },
  onLoad(options) {
  },

  onShow() {
    // this.getServerData();
    clearInterval(this.newKlineTimer)
    clearInterval(this.payStatusTimer)
    clearTimeout(this.KlineTimer)
    this.newKlineTimer = null
    this.KlineTimer = null
    this.getKlineCanvas(this.selectSwitchoverDate);
    this.getConversionStatus();

  },
  methods: {
    ...mapMutations(['setnewKlineTimer', 'setKlineTimer']),
    // 跳转设置密码页面
    goSetPasswordPage() {
      this.showPayPwdmodal = false

      uni.navigateTo({
        url: `/pages/setPassword/index?pagename=pay`,
      });
    },
    // 转换交易
    swapDeal() {
      this.cardBoxList.reverse();
      this.conversionNum = null;
      this.acquireNum = null;
    },
    // 打开周期切换
    async openSwitchoverDate() {
      const result = await reqPeriodConfig();
      if (result.code == 200) {
        this.switchoverDateList = result.data;
        this.isShowSwitchoverDate = true;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 打开确认交易框
    openTransaction() {
      if (uni.getStorageSync('userInfo')?.setPayPwd == 0) {
        this.showPayPwdmodal = true
        return
      }
      if (!this.conversionNum) {
        uni.showToast({
          title: "请输入兑换数量",
          icon: "error",
        });
        return;
      }
      if (this.conversionNum <= 0) {
        uni.showToast({
          title: "兑换数量必须大于0",
          icon: "error",
        });
        return;
      }
      // if (this.cardBoxList[0].id == 0 && this.conversionNum < 1000) {
      //   uni.showToast({
      //     title: "钻石兑换数量最少为1000",
      //     icon: "error",
      //   });
      //   return;
      // }
      if (this.conversionNum % 1 != 0) {
        const isTofixedFour = this.conversionNum.split(".")[1].length;
        if (isTofixedFour > 4) {
          uni.showToast({
            title: "兑换数量最多为小数点后四位",
            icon: "error",
          });
          return;
        }
      }

      this.payPassword = "";
      this.isShowTransaction = true;
    },
    // 兑换
    async getConversion() {
      if (!this.payPassword) {
        uni.showToast({
          title: "请输入支付密码",
          icon: "error",
        });
        return;
      }
      const sendData = {
        exchangeType: this.cardBoxList[0].id == 1 ? 1 : 2,
        number: this.cardBoxList[0].id == 0 ? this.conversionNum * 1000 : this.conversionNum * 1,
        payPassword: this.payPassword,
      };

      const result = await reqConversion(sendData);
      if (result.code == 200) {
        this.transactionStatusNum = 0;
        this.isShowTransaction = false;
        this.isShowTransactionStatus = true;
        this.getConversionStatus();
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 兑换状态
    getConversionStatus() {
      this.payStatusTimer = setInterval(async () => {
        const result = await reqConversionStatus();
        if (result.code == 200 && result.data.status == 2) {
          this.transactionStatusNum = 1;
          this.obtainedNum = result.data.obtained;
          this.conversionNum = null
          this.getHomeData();
          this.getUserProperty();
          clearInterval(this.payStatusTimer);
          return;
        } else if (result.code == 200 && result.data.status == 1) {
          clearInterval(this.payStatusTimer);
          this.getConversionStatus();
        } else if (result.code == 200 && result.data.status == 3) {
          this.transactionStatusNum = 2;
          clearInterval(this.payStatusTimer);
          return;
        } else {
          // uni.showToast({
          //   title: result.msg,
          //   icon: "error",
          // });
          clearInterval(this.payStatusTimer);
          return;
        }
      }, 1000);
    },
    // 点击周期列表切换周期
    changeSelectSwitchoverDate(index) {
      this.selectSwitchoverDate = index;
      this.isShowSwitchoverDate = false;
      clearTimeout(this.KlineTimer);
      this.getKlineCanvas();
    },
    // 跳转交换记录页
    goRecordPage() {
      uni.navigateTo({
        url: "/pages/record/index",
      });
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setInterval(() => {
        this.seriesDataArrIndex = this.seriesDataArrIndex + 10
        this.seriesDataArr[this.seriesDataArr.length - 1] = this.seriesDataArrIndex

        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ["06", "07", "08", "09", "10", "11", "12"],
          series: [
            {
              name: "成交量A",
              data: this.seriesDataArr,
              color: "#FFA814",
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 1000);
    },
    // 请求K线图
    getKlineCanvas(cycleId, timeout) {
      let that = this;
      that.setKlineTimer(this.KlineTimer)

      this.KlineTimer = setTimeout(async () => {
        const result = await reqKlineCanvas(this.switchoverDateList[this.selectSwitchoverDate] ? this.switchoverDateList[this.selectSwitchoverDate].id : 4);
        clearInterval(this.newKlineTimer)
        if (result.code == 200) {
          // let res = {
          //   categories: result.data.klines.map((item) => item.key),
          //   series: [
          //     {
          //       name: "成交量A",
          //       data: result.data.klines.map((item) => item.value),
          //       color: "#FFA814",
          //     },
          //   ],
          // };
          that.seriesDataArr = result.data.klines.map((item) => item.value)
          that.categoriesArr = result.data.klines.map((item) => item.key)
          // this.chartData = JSON.parse(JSON.stringify(res));
          // this.newdiamondValue = result.data.klines[result.data.klines.length - 1]?.value
          that.getHomeData()
          that.newKlineTimer = setInterval(() => {
            that.getHomeData()

          }, 2000);
          clearTimeout(that.KlineTime);
          // this.getHomeData();
          that.getUserProperty();
          if (cycleId > 7) return;
          that.getKlineCanvas(
            that.switchoverDateList[that.selectSwitchoverDate] ? that.switchoverDateList[that.selectSwitchoverDate].id : 11,
            result.data.refreshTime * 1000
          );
        } else {
          uni.showToast({
            title: result.msg,
            icon: "error",
          });
        }
      }, timeout);

    },
    // 请求用户资产信息
    async getUserProperty() {
      const result = await reqUserProperty();
      if (result.code == 200) {
        this.userProperty = result.data;
      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 请求首页数据
    async getHomeData() {
      this.setnewKlineTimer(this.newKlineTimer)

      const result = await reqHomeData();
      if (result.code == 200) {
        this.homeAllData = result.data;
        this.newdiamondValue = result.data.diamondValue
        this.seriesDataArr[this.seriesDataArr.length - 1] = result.data.diamondValue
        let res = {
          categories: this.categoriesArr,
          series: [
            {
              name: "成交量A",
              data: this.seriesDataArr,
              color: "#FFA814",
            },
          ],
        };
        this.chartData = JSON.parse(JSON.stringify(res));


      } else {
        uni.showToast({
          title: result.msg,
          icon: "error",
        });
      }
    },
    // 最大可换
    maxSwapNumInfo() {
      this.conversionNum = (this.maxCanNum * 1).toFixed(4);
    },
  },
  onHide: function () {
    clearInterval(this.newKlineTimer)
    clearTimeout(this.KlineTimer)
    this.newKlineTimer = null
    this.KlineTimer = null
  },
  onUnload() {
    clearInterval(this.newKlineTimer)
    clearTimeout(this.KlineTimer)
    this.newKlineTimer = null
    this.KlineTimer = null
  },
  filters: {
    showTransactionStatusText(val) {
      const statusTextArr = ["交易中", "交易完成", "交易失败"];
      return statusTextArr[val];
    },
  },
  watch: {
    // 计算获得数量
    conversionNum(val) {
      if (!val) {
        this.acquireNum = null;
        return;
      } else if (this.cardBoxList[0].id == 0) {
        this.acquireNum = (val * this.homeAllData.diamondValue * 1000).toFixed(5);
      } else if (this.cardBoxList[0].id == 1) {
        this.acquireNum = (Math.floor(val / this.homeAllData.diamondValue) / 1000).toFixed(3);
      }
    },
    $route(val) {
      if (val.fullPath != '/pages/home/index') {
        clearInterval(this.newKlineTimer)
        clearTimeout(this.KlineTimer)
        this.newKlineTimer = null
        this.KlineTimer = null
      }
    }
  },
  computed: {
    // 最大可用
    maxCanNum() {
      if (this.cardBoxList[0].id == 0) {
        return this.userProperty.diamond >= this.homeAllData.diamond
          ? (this.homeAllData.diamond / 1000)?.toFixed(3) + 'K'
          : (this.userProperty.diamond / 1000)?.toFixed(3) + 'K';
      } else if (this.cardBoxList[0].id == 1) {
        return this.userProperty.cloudBean >= this.homeAllData.cloudBean
          ? this.homeAllData.cloudBean?.toFixed(5)
          : this.userProperty.cloudBean?.toFixed(5);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home_outer {
  width: 100vw;
  background: #fffaef;
  padding-top: 76rpx;

  .home_title {
    margin-left: 44rpx;

    .home_title_top {
      text {
        font-size: 46rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b26;
      }
    }

    .home_title_down {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .home_title_down_left {
        font-size: 25rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        display: flex;
        align-items: center;

        .home_title_down_left_one {
          color: #6c6862;
        }

        .home_title_down_left_two {
          color: #ffa814;
          margin-right: 8rpx;
        }

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }

      .home_title_down_right {
        width: 110rpx;
        height: 34rpx;
        background: #302b26;
        border-radius: 17rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 50rpx;

        text {
          font-size: 19rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fffaef;
        }
      }
    }
  }

  .charts_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 46rpx;

    .charts_title_nowday {
      margin-left: 44rpx;

      .charts_title_nowday_top {
        font-size: 25rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #6c6862;
      }

      .charts_title_nowday_down {
        font-size: 46rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b26;
      }
    }

    .charts_title_historyday {
      margin-right: 56rpx;

      .charts_title_historyday_top {
        font-size: 25rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #6c6862;
      }

      .charts_title_historyday_down {
        font-size: 46rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b26;
      }
    }

    view {
      display: flex;
      flex-direction: column;
    }
  }

  .charts_box {
    margin-top: 40rpx;
    width: 100%;
    height: 300px;
    border-radius: 0rpx 0rpx 38rpx 38rpx;
    box-shadow: 6rpx 8rpx 16rpx rgb(0, 0, 0, 0.2);
  }

  .exchange_box {
    margin-top: 44rpx;
    width: 100%;

    .exchange_box_title {
      margin-left: 44rpx;

      .exchange_box_title_top {
        display: flex;
        justify-content: space-between;

        .exchange_box_title_top_left {
          font-size: 46rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #302b26;
        }

        .exchange_box_title_top_right {
          width: 72rpx;
          height: 35rpx;
          border: 1px solid #302b26;
          opacity: 0.5;
          border-radius: 17rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 50rpx;

          text {
            font-size: 19rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #302b26;
            opacity: 0.8;
          }
        }
      }

      .exchange_box_title_down {
        font-size: 25rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #6c6862;
        display: flex;
        align-items: center;

        .exchange_box_title_down_line {
          margin: 0 20rpx;
        }
      }
    }
  }

  .card_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    row-gap: 20rpx;
    margin-top: 40rpx;

    .card_box_item {
      width: 711rpx;
      height: 171rpx;
      background: #f5f0e5;
      border: 0px solid #ff6f05;
      border-radius: 38rpx;

      .card_box_item_top {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;

        .card_box_item_top_left {
          font-size: 19rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #302b26;
          margin-left: 24rpx;
        }

        .card_box_item_top_right {
          font-size: 19rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #302b26;
          opacity: 0.6;
          margin-right: 30rpx;
        }
      }

      .card_box_item_center {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: -10rpx;

        .card_box_item_center_img {
          display: flex;
          align-items: center;
          margin-left: 24rpx;

          image {
            width: 46rpx;
            height: 46rpx;
          }

          .card_box_item_center_text {
            font-size: 47rpx;
            font-family: DreamHanSansSC;
            font-weight: 600;
            color: #302b26;
            opacity: 0.9;
            margin-left: 10rpx;
          }
        }

        .card_box_item_center_ipt {
          width: 440rpx;
          margin-right: 40rpx;
          display: flex;
          align-items: center;
          position: relative;

          .card_box_item_center_ipt_text_down_unit {
            position: absolute;
            right: 0;
          }
        }
      }

      .card_box_item_down {
        display: flex;
        justify-content: flex-end;
        margin-top: -20rpx;
        width: 100%;

        .card_box_item_down_text {
          width: 72rpx;
          height: 35rpx;
          border: 1px solid #0e050b;
          opacity: 0.5;
          border-radius: 17rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;

          text {
            font-size: 19rpx;
            font-family: DreamHanSansSC;
            font-weight: normal;
            color: #302b26;
            opacity: 0.8;
          }
        }
      }
    }

    .card_box_swap {
      position: absolute;
      top: 50%;

      .card_box_swap_img {
        margin-top: -26rpx;
        width: 70rpx;
        height: 70rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .exchange_rate {
    margin-top: 12rpx;
    width: 100%;
    display: flex;
    justify-content: center;

    text {
      font-size: 19rpx;
      font-family: DreamHanSansSC;
      font-weight: normal;
      color: #302b26;
      opacity: 0.6;
    }
  }

  .affirm_conversion {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 52rpx 0;

    .affirm_conversion_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 712rpx;
      height: 108rpx;
      background: #ff7006;
      border-radius: 38rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: normal;
        color: #ffffff;
      }
    }
  }

  .switchoverDate_outer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 128rpx;

    .switchoverDate_title {
      display: flex;
      justify-content: center;
      margin-top: 52rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b27;
      }
    }

    .switchoverDate_list {
      display: flex;
      flex-wrap: wrap;
      margin-left: 44rpx;
      column-gap: 20rpx;
      row-gap: 18rpx;
      margin-top: 52rpx;

      .switchoverDate_item {
        width: 110rpx;
        height: 47rpx;
        border: 1px solid rgb(48, 43, 38, 0.5);
        border-radius: 17rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 26rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #302b26;
          opacity: 0.8;
        }
      }

      .active {
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);

        text {
          font-size: 26rpx;
          font-family: DreamHanSansSC;
          font-weight: normal;
          color: #fffaef;
          opacity: 0.8;
        }
      }
    }
  }

  .transaction_outer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 128rpx;

    .transaction_title {
      display: flex;
      justify-content: center;
      margin-top: 52rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b27;
      }
    }

    .transaction_form_pawsword {
      width: 545rpx;
      height: 109rpx;
      border: 3px solid #ff9e3c;
      border-radius: 26rpx;
      display: flex;
      align-items: center;

      .transaction_form_pawsword_img {
        width: 40rpx;
        height: 40rpx;
        margin-left: 14rpx;
        margin-right: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .transaction_form_pawsword_affirm {
      position: fixed;
      display: flex;
      justify-content: center;
      margin-top: 120rpx;

      view {
        width: 545rpx;
        height: 108rpx;
        background: linear-gradient(to right, #ff7007 0%, #ffa749 100%);
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 38rpx;
          font-family: DreamHanSansSC;
          font-weight: 600;
          color: #ffffff;
        }
      }
    }
  }

  .transactionStatus_outer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 128rpx;

    .ransactionStatus_title {
      display: flex;
      justify-content: center;
      margin-top: 52rpx;

      text {
        font-size: 38rpx;
        font-family: DreamHanSansSC;
        font-weight: 600;
        color: #302b27;
      }
    }

    .transaction_status_box {
      display: flex;
      justify-content: center;
      margin-top: 50rpx;

      .transaction_status1 {
        width: 186rpx;
        height: 186rpx;
        position: relative;

        .transaction_status1_img1 {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        .transaction_status1_img2 {
          position: absolute;
          top: 0;
          right: 0;
          width: 106rpx;
          height: 100rpx;
        }
      }

      .transaction_status2 {
        width: 186rpx;
        height: 186rpx;

        .transaction_status2_img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .exchange_rate_hign {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      font-size: 19rpx;
      font-family: DreamHanSansSC;
      font-weight: normal;
      color: #302b26;
      opacity: 0.6;
    }
  }

  .card_box_item_center_ipt_text {
    margin-left: 20rpx;
    font-size: 47rpx;
    font-family: Dream Han Sans SC;
    font-weight: normal;
    position: relative;

    .card_box_item_center_ipt_text_top {
      color: #302b26;
      opacity: 0.6;
      width: 400rpx;
    }

    .card_box_item_center_ipt_text_down {
      color: #302b26;
    }
  }

  .ransactionStatus_obtained {
    margin-top: 50rpx;
    font-size: 38rpx;
    font-family: DreamHanSansSC;
    font-weight: 600;
    color: #302b27;
    opacity: 0.6;
  }
}
</style>
